<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div :style={fontSize: age + 'px' }>{{msg}}</div>
    <menu-age @event='handle($event)'>
    </menu-age>

  </div>
  <script src="../vue.js"></script>
  <script>
    Vue.component('menuAge', {
      /*
        props 存在一个特性
        props 是一个单项数据流
        props 只能用来接收数据，但是不能够对props传递的值进行修改
      */
      props: [''],
      data: function () {
        return {
          name: 'jerry'
        }
      },
      template: `
        <div>
          <p>{{name}}</p>
          <button @click='$emit("event", 10)'>点击事件</button>
        </div>
      `
      /*
        $emit 作用： 定义一个事件，并触发，触发以后，就类似于在系统中存在event这个事件
      */
    })


    var vm = new Vue({
      el: '#app',
      data: {
        age: 15,
        msg: '喜欢'
      },
      methods: {
        handle(num) {
          console.log(num);
          this.age += num
          console.log(this.age);
        }
      }
    })
  </script>
</body>

</html>